<template>
  <!-- 处置场所明细 -->
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <div class="stepContent">
        <div>
          <!-- <div class="basicTitle"> 基本信息</div>
          <hr class="hrStyle" />-->
          <el-row>
            
            <el-col :span="8">
              <el-form-item label="处置场所名称" prop="soilName">
                <el-input class="fullUp" v-model="form.soilName" clearable placeholder="请输入处置场所名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处置场所负责人" prop="manager">
                <el-input class="fullUp" v-model="form.manager" clearable placeholder="请输入处置场所负责人" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人联系电话" prop="managerPhone">
                <el-input class="fullUp" v-model="form.managerPhone" clearable placeholder="请输入负责人联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="所属省" prop="provinceCode">
                <el-select
                  class="fullUp"
                  v-model="form.provinceCode"
                  clearable
                  placeholder="请选择所属省"
                  @change="formProvinceChange"
                >
                  <el-option
                    v-for="(v,index) in provinceList"
                    :key="index"
                    :label="v.provinceName"
                    :value="v.provinceCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="所属市" prop="cityCode">
                <el-select
                  class="fullUp"
                  v-model="form.cityCode"
                  clearable
                  placeholder="请选择所属市"
                  @change="formCityChange"
                >
                  <el-option
                    v-for="(v,index) in cityList"
                    :key="index"
                    :label="v.cityName"
                    :value="v.cityCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="所属县区" prop="areaCode">
                <el-select
                  class="fullUp"
                  v-model="form.areaCode"
                  clearable
                  placeholder="请选择区域"
                  @change="formAreaChange"
                >
                  <el-option
                    v-for="(v,index) in areaList"
                    :key="index"
                    :label="v.areaName"
                    :value="v.areaCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细地址" prop="address">
                <el-input class="fullUp" v-model="form.address" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="有效期开始日期" prop="startDate">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  class="fullUp"
                  v-model="form.startDate"
                  placeholder="请输入有效期开始日期"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="有效期结束日期" prop="endDate">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  class="fullUp"
                  v-model="form.endDate"
                  placeholder="请输入有效期结束日期"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <!-- <el-form-item label="处置场所" prop="name">
                              <el-upload
                                  class="avatar-uploader"
                                  :action="actionUrl"
                                  :show-file-list="false"
                                  :on-success="handleUploadSuccess"
                                  :on-error="handleUploadError"
                                  :before-upload="handleBeforeUpload">
                                  <img v-if="form.name" :src="form.name" class="avatar">
                                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                              </el-upload>
              </el-form-item>-->
              <el-form-item label="处置场所" prop="name">
                <!-- <Editor v-model="form.name" :min-height="192"/> -->
                <image-upload v-model="form.name" :limit="1" />
              </el-form-item>
              <!-- <el-form-item label="处置场所" prop="name">
                              <file-upload v-model="form.name"/>
              </el-form-item>-->
            </el-col>
          </el-row>
          <!-- <hr class="hrStyle" /> -->
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>
  
  <script>
import { addSoil, updateSoil } from "@/api/modules/soil";

import { provinceList, cityList, areaList } from "@/api/region/region";

export default {
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  dicts: ["disposal_type"],
  data() {
    return {
      active: 0,

      // 表单校验
      rules: {
        soilName: [
          { required: true, message: "处置场所名称不能为空", trigger: "blur" }
        ],
        manager: [
          { required: true, message: "处置场所负责人不能为空", trigger: "blur" }
        ],
        // managerPhone: [
        //   { required: true, message: "负责人联系电话不能为空", trigger: "blur" }
        // ],
      },

      uploadUrl:  process.env.VUE_APP_BASE_API + "/common/upload",

      provinceList: [],
      cityList: [],
      areaList: [],

      categoryList: [
        { value: "1", label: "砂石土场" },
        { value: "2", label: "土方土场" },
        { value: "3", label: "建筑垃圾土场" },
        { value: "4", label: "渣土土场" },
        { value: "5", label: "灰浆等流体土场" },
        { value: "6", label: "其他土场" }
      ],

      formData: {
        provinceName: "", // 省
        cityName: "", // 市
        areaName: "", // 区/县
        soilName: "", // 处置场所名称
        manager: "", // 处置场所负责人
        managerPhone: "", // 负责人联系电话
        category: "", // 处置场所类型  (1.砂石土场、2.土方土场、3.建筑垃圾土场、4.渣土土场、5.灰浆等流体土场、6.其他土场)
        startDate: "", // 许可有效期开始日期
        endDate: "", // 许可有效期结束日期
        address: "", // 详细地址
        name: "", // 处置场所：
        remark: "" // 备注
      }
    };
  },
  mounted() {
    this.initProvinceList();
    if (this.form.cityName) {
      this.initCityList(this.form.provinceName);
    }
    if (this.form.areaName) {
      this.initAreaList(this.form.cityCode);
    }
  },
  beforeDestroy() {},
  methods: {
    back() {
      this.active--;
    },
    next() {
      if (this.active++ > 3) this.active = 0;
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form);
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSoil(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.active = 0;
              this.$emit("submitForm");
              return;
              this.open = false;
              this.getList();
            });
          } else {
            addSoil(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.active = 0;
              this.$emit("submitForm");
              return;
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    // 取消按钮
    cancel() {
      this.$emit("cancel");
    },

    initProvinceList() {
      provinceList().then(response => {
        this.provinceList = response.data;
      });
    },

    initCityList(v) {
      let obj = {
        provinceCode: v
      };
      cityList(obj).then(response => {
        this.cityList = response.data;
      });
    },
    initAreaList(v) {
      let obj = {
        cityCode: v
      };
      areaList(obj).then(response => {
        this.areaList = response.data;
      });
    },
    //省份选择的
    formProvinceChange(v) {
      console.log(v, "v");
      if (v) {
        this.initCityList(v);
      }
      var obj = {};
      obj = this.provinceList.find(function(item) {
        return item.provinceCode === v;
      });
      this.form.provinceName = "";
      if (obj && obj.provinceName) {
        this.form.provinceName = obj.provinceName;
      }
      // this.form.provinceName = obj.provinceName;

      this.cityList = [];
      this.areaList = [];

      this.form.cityCode = "";
      this.form.cityName = "";
      this.form.areaCode = "";
      this.form.areaName = "";
    },

    //城市选择的
    formCityChange(v) {
      if (v) {
        this.initAreaList(v);
      }

      // this.initAreaList(v);

      var obj = {};
      obj = this.cityList.find(function(item) {
        return item.cityCode === v;
      });
      this.form.cityName = "";
      if (obj && obj.cityName) {
        this.form.cityName = obj.cityName;
      }
      // this.form.cityName = obj.cityName;

      this.form.cityCode = v;
      this.areaList = [];

      this.form.areaCode = "";
      this.form.areaName = "";
    },
    formAreaChange(v) {
      var obj = {};
      obj = this.areaList.find(function(item) {
        return item.areaCode === v;
      });
      console.log("area");
      console.log(obj);

      this.form.areaName = "";
      if (obj && obj.areaName) {
        this.form.areaName = obj.areaName;
      }

      // this.form.areaName = obj.areaName;

      this.form.areaCode = v;
    },

    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
      const isJPG = type.includes(file.type);
      // 检验文件格式
      if (!isJPG) {
        this.$message.error(`图片格式错误!`);
        return false;
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(res, file) {
      // 如果上传成功
      if (res.code == 200) {
        // 获取富文本组件实例
        let quill = this.Quill;
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(
          length,
          "image",
          process.env.VUE_APP_BASE_API + res.fileName
        );
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    handleUploadError() {
      this.$message.error("图片插入失败");
    },

    beforeAvatarUpload() {}
  }
};
</script>
  
  <style lang="scss" scoped>
.stepContent {
}
.basicTitle {
  margin: 5px 0;
  font-size: 16px;
  font-weight: bold;
}
.dialog-footer {
  text-align: right;
}
.hrStyle {
  border: none; /* 移除默认的边框 */
  height: 1px; /* 设置高度 */
  background-color: #999; /* 设置颜色 */
  margin: 20px 0; /* 设置外边距 */
}

.el-upload {
  border: 1px dashed #d9d9d9;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;

  border: 1px dashed #d9d9d9;
  border-radius: 10px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.fullUp {
  width: 100%;
}
</style>